<!-- 车辆预约 -->
<template>
	<view class="carYuYue">
		<!-- #ifdef APP-PLUS || H5 -->
		<roc-navbar
			title="车辆预约"
			rightIcon="search"
			rightText="筛选"
			@rightClick="rightClick"
		></roc-navbar>
		<!-- #endif -->
		<!-- #ifndef APP-PLUS || H5 -->
		<roc-navbar title="车辆预约"></roc-navbar>
		<view class="search-btn"  @click="rightClick">筛选</view>
		<!-- #endif -->
		<view class="check-view-box">
			<view class="roc-btn">
				<text @click="switchList()">切换</text>
			</view>
		</view>
		<view class="" v-show="isList">
			<publicTabel ref="data" />
		</view>
		<view class="" v-show="!isList">
			<publicList ref="list" />
		</view>
		<view style="margin-top: 20rpx;">
			<page-pagination :total="total" :pageSize="form.page_size" :currentPage="form.page" @change="changePage"
				mode="simple" :showAround="true"></page-pagination>
		</view>
		<u-modal :show="changeWord" title="字段选择" @confirm="confirm" :closeOnClickOverlay="true"
			@close="changeWord = false">
			<view class="">
				<u-checkbox-group v-model="changeDatas" placement="column" @change="checkboxChange">
					<u-checkbox :customStyle="{marginBottom: '8px'}" v-for="item in headers" :key="item.key"
						:name="item.label" :label="item.label" :iconSize="26" :size="28" :labelSize="28"></u-checkbox>
				</u-checkbox-group>
			</view>
		</u-modal>
		<view class="addData">
			<u-icon name="plus-circle-fill" size="50px" color="#3c9cff" @click="addCar()"></u-icon>
		</view>
		<u-popup :show="searchShow" @close="searchShow = false"  mode="bottom" round="30"
			:closeable="false">
			<view class="title">筛选</view>
			<view class="searchbox">
				<u--form labelWidth="150">
					<u-form-item label="订单类型" borderBottom @click="orderType = true;">
						<text v-if="!form['2er5tzaz6pqs']" style="color: rgb(192, 196, 204);">订单类型</text>
						<text v-else>{{form['2er5tzaz6pqs']}}</text>
						<u-icon slot="right" name="arrow-right"></u-icon>
					</u-form-item>
					<u-form-item label="订单编号" borderBottom @click="orderName = true;">
						<text v-if="!formData.orderName" style="color: rgb(192, 196, 204);">订单编号</text>
						<text v-else>{{formData.orderName}}</text>
						<u-icon slot="right" name="arrow-right"></u-icon>
					</u-form-item>
					<u-form-item label="车牌号" borderBottom>
						<u--input v-model="form.car_no" disabledColor="#ffffff" placeholder="车牌号" border="none">
						</u--input>
						<u-icon slot="right" name="arrow-right"></u-icon>
					</u-form-item>
				</u--form>
			</view>
			<u-picker :show="orderType" itemHeight="88" :columns="orderTypeList" keyName="name" closeOnClickOverlay
				@cancel="orderType = false" @close="orderType = false" @confirm="typeSelect">
			</u-picker>
			<u-picker :show="orderName" itemHeight="88" :columns="orderNameOptions" keyName="name" closeOnClickOverlay
				@cancel="orderName = false" @close="orderName = false" @confirm="nameSelect"></u-picker>
			<view class="btn-box u-p-20">
				<u-button text="重置" shape="circle" @click="resetData()"></u-button>
				<u-button type="primary" text="确定" shape="circle" @click="searchData()"></u-button>
			</view>
		</u-popup>
	</view>
</template>

<script>
	import {
		getCarList,
		getCaiGouDingDan,
		getFaHuoDingDan
	} from '@/api/car.js'
	import publicTabel from '@/components/publicTabel.vue'
	import publicList from '@/components/publicList.vue'
	export default {
		components: {
			publicTabel,
			publicList,
		},
		data() {
			return {
				urlQuery: null,
				orderName: false,
				changeWord: false,
				isList: false,
				searchShow: false,
				data: {
					list: [],
					headers: [],
				},
				form: {
					page: 1,
					page_size: 5,
					['2er5tzaz6pqs']: '',
					car_no: '',
					ceh5tzaz3tb9: ''
				},
				total: 0,
				headers: [{
						label: 'ID',
						key: 'id',
						width: 100,
					},
					{
						label: '订单编号',
						key: 'ceh5tzaz3tb9_val'
					},
					{
						label: '订单类型',
						key: '2er5tzaz6pqs'
					},
					{
						label: '车辆',
						key: 'qb85tzazmn3p_val'
					},
					{
						label: '添加时间',
						key: 'add_time'
					},
				],
				formData: {
					orderName: ''
				},
				orderType: false,
				orderTypeList: [
					[{
							name: '发货订单',
							id: '发货订单'
						},
						{
							name: '采购订单',
							id: '采购订单'
						},
					]
				],
				orderNameOptions: [],
				changeDatas: []
			};
		},
		onNavigationBarButtonTap(e) {
			this.searchShow = true
		},
		onLoad(option) {
			this.urlQuery = option;
			if (uni.getStorageSync("changeDataY")) {
				this.data.headers = uni.getStorageSync("changeDataY")
			} else {
				this.data.headers = this.headers
			}
			if (uni.getStorageSync("changeY")) {
				this.changeDatas = uni.getStorageSync("changeY")
			} else {
				this.changeDatas = ['ID', '订单编号', '订单类型', '车辆', '导入时间', '添加时间']
			}
		},
		mounted() {
			this.getData()
		},
		methods: {
			rightClick(){
				this.searchShow = true
			},
			addCar() {
				uni.navigateTo({
					url: `/pages/carYuYue/addCar`
				});
			},
			checkboxChange(n) {
				this.changeDatas = n
			},
			searchData() {
				this.getData();
				this.searchShow = false
			},
			resetData() {
				this.form['2er5tzaz6pqs'] = '';
				this.form.ceh5tzaz3tb9 = '';
				this.formData.orderName = '';
				this.form.car_no = '';
				this.getData();
			},
			confirm() {
				let arr = []
				this.headers.forEach(ele => {
					this.changeDatas.forEach(data => {
						if (ele.label === data) {
							arr.push(ele)
						}
					})
				})
				uni.setStorageSync("changeDataY", arr);
				uni.setStorageSync("changeY", this.changeDatas);
				this.data.headers = arr
				this.$refs['data'].showEdit(this.data)
				this.$refs['list'].showEdit(this.data)
				this.changeWord = false
			},
			typeSelect(e) {
				this.form['2er5tzaz6pqs'] = e.value[0].name;
				this.form.ceh5tzaz3tb9 = '';
				this.formData.orderName = '';
				if (this.form['2er5tzaz6pqs'] === '发货订单') {
					this.orderNameOptions = []
					this.getFaHuoDingDan()
					this.orderType = false
				} else {
					this.orderNameOptions = []
					this.getCaiGouDingDan()
					this.orderType = false
				}
			},
			nameSelect(e) {
				this.form.ceh5tzaz3tb9 = e.value[0].id;
				this.formData.orderName = e.value[0].name;
				this.orderName = false
			},
			// 发货订单
			async getFaHuoDingDan() {
				const {
					data
				} = await getFaHuoDingDan()
				let newarr = []
				data.data.map(a => {
					let obj = {}
					obj.name = a['3sgg7a1sb3ne3']
					obj.id = a.id
					newarr.push(obj)
				})
				this.orderNameOptions.push(newarr)
			},
			// 采购订单
			async getCaiGouDingDan() {
				const {
					data
				} = await getCaiGouDingDan()
				let newarr = []
				data.data.map(a => {
					let obj = {}
					obj.name = a['3sgg7a1sb3ne3']
					obj.id = a.id
					newarr.push(obj)
				})
				this.orderNameOptions.push(newarr)
			},
			switchList() {
				this.isList = !this.isList
				if (this.isList) {
					this.form.page = 1,
						this.form.page_size = 15,
						this.getData();
				} else {
					this.form.page = 1,
						this.form.page_size = 5,
						this.getData();
				}
			},
			changePage(currentPage) {
				this.form.page = currentPage;
				this.getData();
			},
			async getData() {
				const {
					data
				} = await getCarList(this.form)
				this.data.list = data.data.list
				this.total = Number(data.data.total)
				this.data.type = 'isDel'
				this.$refs['data'].showEdit(this.data)
				this.$refs['list'].showEdit(this.data)
			}
		}
	};
</script>

<style lang="scss" scoped>
	.carYuYue {
		.search {
			width: 95%;
			margin: 0 auto;
		}

		.searchbox {
			width: 90%;
			margin: 0 auto;
			padding-bottom: 40rpx;
		}

		.addData {
			position: fixed;
			right: 16.5rpx;
			bottom: 130rpx;
			z-index: 99;
			opacity: 0.8;
		}

		.title {
			text-align: center;
			padding: 28rpx 0 10rpx 0;
			font-size: 32rpx;
		}

		.btn-box {
			display: flex;
		}

		.check-view-box {
			position: fixed;
			right: 22rpx;
			bottom: 224rpx;
			z-index: 99;
			opacity: 0.8;
			.roc-btn {
				width: 80rpx;
				height: 80rpx;
				line-height: 80rpx;
				text-align: center;
				color: #fff;
				padding: 0;
				border-radius: 50%;
				background-color: rgb(60, 156, 255);
			}
		}
		.search-btn {
			position: fixed;
			z-index: 999;
			right: 20rpx;
			bottom: 315rpx;
			width: 80rpx;
			height: 80rpx;
			line-height: 80rpx;
			text-align: center;
			color: #fff;
			border-radius: 50%;
			background-color: #3d9ffc;
			opacity: 0.8;
			&.check{
				right: 20rpx;
				bottom: 200rpx;
			}
		}
	}
</style>
<style>
	.carYuYue .u-slide-up-enter-to {
		z-index: 10076 !important;
	}
</style>
